<template>
  <div class="report-main">
    <div class="" style="height:70px;" v-show="canShow"></div>
    <div class="report-search">
      <div class="report-search-box">
        <svg class="all-close-btn icon-svg" v-show="!fullScreen" @click="closeAll" viewBox="0 0 612 792">
          <path :d="svgPath.closeFullScreen"/>
        </svg>
        <year-month :filter="filterN" ref="yearMonth" @getYearAndMonth="getYearAndMonth"></year-month>
        <a class="import-excel-text" :href="downloadHref"
           download="exportTownWorksBasicMedicareExcel">导出</a>
      </div>
    </div>
    <div class="report-wrapper">
      <div id="report-loading-pension-add" class="report-loading" v-show="showLoading"></div>
      <div v-show="!showLoading">
        <div class="report-container" v-if="showTable">
          <h3 class="report-title">
            城镇职工基本养老保险参保扩面情况
          </h3>
          <div class="report-box">
            <span class="report-unit">单位：人</span>
            <table style="min-height:416px;">
              <thead>
              <tr>
                <th rowspan="2">单位</th>
                <th colspan="7">扩面任务完成情况</th>
              </tr>
              <tr>
                <th>当期新增</th>
                <th>上年同期</th>
                <th>同比增减</th>
                <th>增幅%</th>
                <th>新增任务</th>
                <th>完成比例</th>
                <th>排名</th>
              </tr>
              </thead>
              <tbody>
              <tr class="reportTotal">
                <td style="color:#fff;">{{all.name}}</td>
                <td>{{all.dangQiNum}}</td>
                <td>{{all.lastAdd}}</td>
                <td>{{all.moreLess}}</td>
                <td>{{all.amplification}}</td>
                <td>{{all.newTask}}</td>
                <td>{{all.completionRate}}</td>
                <td></td>
              </tr>
              <tr v-for="(item,index) in reportData">
                <td>{{item.name}}</td>
                <td class="report-red">{{item.dangQiNum}}</td>
                <td>{{item.lastAdd}}</td>
                <td>{{item.moreLess}}</td>
                <td>{{item.amplification}}</td>
                <td class="report-red edit-box" @mouseenter="showEdit(index)" @mouseleave="hideEdit">
                  <input type="text" maxlength="15" v-model="item.newTask" @blur="hideBlur($event,index,item.areaId)"
                         v-focus="editableIndex==index" v-blur="editableIndex==-1"
                         :readonly="editableIndex==index?false:true" @keydown="onlyNum($event)">
                  <svg @click="chooseEdit(index)" class="edit-btn" v-show="editIndex==index" viewBox="0 0 1024 1024">
                    <path :d="svgPath.editBtn1"/>
                    <path :d="svgPath.editBtn2"/>
                  </svg>
                </td>
                <td>{{item.completionRate}}</td>
                <td>{{item.rank}}</td>
              </tr>
              </tbody>
            </table>
            <div class="report-remind">
              <span class="report-remind-left">注：</span>
              <div class="report-remind-right">
                <p>1、本次排名以全年任务完成情况为准</p>
                <p>2、没有省下目标数</p>
              </div>
            </div>
          </div>
        </div>
        <div class="report-container" v-if="!showTable" >
          <h3 class="report-title">
            城镇职工基本养老保险参保人数
          </h3>
          <div class="report-box">
            <span class="report-unit">单位：人</span>
            <table style="min-height:416px;">
              <thead>
              <tr>
                <th rowspan="2">单位</th>
                <th colspan="7">参保人员基本情况</th>
              </tr>
              <tr>
                <th>当期参保</th>
                <th>期初人数</th>
                <th>当期净增</th>
                <th>当期增幅%</th>
                <th>任务目标</th>
                <th>完成比例</th>
                <th>排名</th>
              </tr>
              </thead>
              <tbody>
              <tr class="reportTotal">
                <td style="color:#fff;">{{all1.name}}</td>
                <td>{{all1.dangQiNum}}</td>
                <td>{{all1.beginRenci}}</td>
                <td>{{all1.nowMore}}</td>
                <td>{{all1.amplification}}</td>
                <td>{{all1.newTask}}</td>
                <td>{{all1.completionRate}}</td>
                <td></td>
              </tr>
              <tr v-for="(item,index) in reportData1">
                <td>{{item.name}}</td>
                <td class="report-red">{{item.dangQiNum}}</td>
                <td>{{item.beginRenci}}</td>
                <td>{{item.nowMore}}</td>
                <td>{{item.amplification}}</td>
                <td class="report-red edit-box" @mouseenter="showEdit(index,1)" @mouseleave="hideEdit">
                  <input type="text" v-model="item.newTask" maxlength="15" @blur="hideBlur($event,index,item.areaId,1)"
                         v-focus="editableIndex1==index" v-blur="editableIndex1==-1"
                         :readonly="editableIndex1==index?false:true" @keydown="onlyNum($event)">
                  <svg @click="chooseEdit(index,1)" class="edit-btn" v-show="editIndex1==index" viewBox="0 0 1024 1024">
                    <path :d="svgPath.editBtn1"/>
                    <path :d="svgPath.editBtn2"/>
                  </svg>
                </td>
                <td>{{item.completionRate}}</td>
                <td>{{item.rank}}</td>
              </tr>
              </tbody>
            </table>
            <div class="report-remind">
              <span class="report-remind-left">注：</span>
              <div class="report-remind-right">
                <p>1、本次排名以全年任务完成情况为准</p>
                <p>2、没有省下目标数</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import {svgPath, quitFullScreen, getRankData, fifteenNum, loadingOpt} from "../../assets/js/utils";
  import SingleListFilterWithoutCb from '../last/filter/single-list-filter-without-checkbox.vue'
  import {getSearchItems, getPensionAddList, getPensionAddExportExcel, setEditNum} from '../../api/api'
  import YearMonth from '../view/year-month.vue'
  import {getDefaultYear} from '../last/chart/utils/dataUtils'
  export default {
    props: ['isChange', 'fullScreen','pageChange'],
    components: {
      YearMonth,
      SingleListFilterWithoutCb
    },
    data() {
      return {
        showLoading: true,
        download: false,
        downloadHref: 'javascript:;',
        canShow: true,
        filterN: null,
        queryYear: '',
        svgPath: svgPath,
        editIndex: -1,
        editableIndex: -1,
        editIndex1: -1,
        editableIndex1: -1,
        all: {},
        all1: {},
        reportData1: [],
        reportData: [],
        originData: '',
        originData1: '',
        showTable:true
      }
    },
    // 自定义指令
    directives: {
      focus: {
        update: function (el, {value}) {
          if (value) {
            el.focus()
          }
        }
      },
      blur: {
        update: function (el, {value}) {
          if (value) {
            el.blur()
          }
        }
      },
      cli: {
        update: function (el, {value}) {
          if (value) {
            el.click()
          }
        }
      }
    },
    watch: {
      pageChange(){
        let that = this;
        let id = that.$route.params.id;
        if(id==1){
          that.showTable = true;
        }else{
          that.showTable = false;
        }
      },
      isChange(){
        if (document.querySelector('.el-header')) {
          this.canShow = true;
        } else {
          this.canShow = false;
        }
      },
    },
    mounted() {
      // alert(12121)
      this.myChart = this.$echarts.init(document.getElementById('report-loading-pension-add'), null, {renderer: 'canvas'})
      //给echart 加loading效果
      this.myChart.showLoading(loadingOpt);
      //获取筛选数据
      getSearchItems('init/initInput').then((res) => {
        if (res.code == 0) {
          this.filterN = res.data;
          this.queryYear = getDefaultYear(this.filterN)
          this.$refs.yearMonth.setDefaultMonthAndPosition(this.queryYear)
        }
      });
    },
    methods: {
      onlyNum(event){
        if(!(event.keyCode==46)&&!(event.keyCode==8)&&!(event.keyCode==37)&&!(event.keyCode==39))
          if(!((event.keyCode>=48&&event.keyCode<=57)||(event.keyCode>=96&&event.keyCode<=105)))
            event.returnValue=false;
      },
      getData (){
        getPensionAddList('excel/newPension/endowmentInsurance', this.queryYear, this.month).then(res => {
          if (res.code == 0) {
            this.showLoading = false;
            this.myChart.hideLoading()
            let json = res.data;
            this.all = json.kuoMian.all;
            this.all1 = json.renCi.all;
            this.reportData = json.kuoMian.reportData;
            this.reportData1 = json.renCi.reportData;
            this.originData = JSON.stringify(this.reportData);
            this.originData1 = JSON.stringify(this.reportData1);
            this.reportNumber = json.kuoMian.reportNumber;
            this.reportNumber1 = json.renCi.reportNumber;
            getRankData(this, this.reportData);
            getRankData(this, this.reportData1, 1);
            this.importExcelReport();
          }
        })
      },
      importExcelReport(){
        let rank1 = [];
        let rank2 = []
        this.idArr.map((item, index) => {
          let arr = '';
          let arr1 = '';
          if (this.rankArr[index]) {
            arr = `${item}-${this.rankArr[index]}`
          } else {
            arr = `${item}-`
          }
          rank1.push(arr);
          if (this.rankArr1[index]) {
            arr1 = `${this.idArr1[index]}-${this.rankArr1[index]}`
          } else {
            arr1 = `${this.idArr1[index]}-`
          }
          rank2.push(arr1);
        })
        let url = getPensionAddExportExcel('excel/newPensionExport/exportEndowmentInsuranceExcel', this.queryYear, this.month, rank1, rank2)
        this.downloadHref = url;
      },
      closeAll(){
        quitFullScreen();
      },
      showEdit(index, type){
        if (type) {
          this.editIndex1 = index;
        } else {
          this.editIndex = index;
        }
      },
      hideEdit(){
        this.editIndex = -1;
        this.editableIndex = -1;
        this.editIndex1 = -1;
        this.editableIndex1 = -1;
      },
      chooseEdit(index, type){
        if (type) {
          this.editableIndex1 = index;
        } else {
          this.editableIndex = index;
        }
        if (type) {
          this.editIndex1 = -1;
        } else {
          this.editIndex = -1;
        }
      },
      hideBlur(e, index, id, type){
        let val = e.target.value;
        let oldVal = '';
        if (type) {
          oldVal = JSON.parse(this.originData1)[index].newTask;
        } else {
          oldVal = JSON.parse(this.originData)[index].newTask;
        }
        if (val == oldVal) {
          //判断新增任务是否修改
        } else if (val == '' || fifteenNum(val)) {
          //发送
          let totalArr = [];
          if (type) {
            this.reportData1[index].newTask = val;
            this.reportData1.map((item, index) => {
              totalArr.push(item.newTask);
            })
            this.all1.newTask = totalArr.reduce((n, m) => Number(n) + Number(m));
            this.all1.completionRate = Math.round((this.all1.dangQiNum / this.all1.newTask).toFixed(4) * 10000) / 100 + '%';
            this.originData1 = JSON.stringify(this.reportData1);
            getRankData(this, this.reportData1, 1)
            setEditNum('report/yearTargetSetUp', this.reportNumber1, this.queryYear, id, val)
            this.importExcelReport();
            // this.getData()
          } else {
            this.reportData[index].newTask = val;
            this.reportData.map((item, index) => {
              totalArr.push(item.newTask);
            })
            this.all.newTask = totalArr.reduce((n, m) => Number(n) + Number(m));
            this.all.completionRate = Math.round((this.all.dangQiNum / this.all.newTask).toFixed(4) * 10000) / 100 + '%';
            this.originData = JSON.stringify(this.reportData);
            getRankData(this, this.reportData)
            setEditNum('report/yearTargetSetUp', this.reportNumber, this.queryYear, id, val)
            this.importExcelReport();
            // this.getData()
          }
        } else {
          this.$message({
            message: '只允许输入正整数',
            center: true,
            type: 'info',
          });
          if (type) {
            this.reportData1 = JSON.parse(this.originData1);
            getRankData(this, this.reportData1, 1)
          } else {
            this.reportData = JSON.parse(this.originData);
            getRankData(this, this.reportData)
          }
        }
      },
      getYearAndMonth(year, month, yearMonth) {
        this.queryYear = year;
        this.month = month;
        this.showLoading = true;
        this.myChart.showLoading(loadingOpt)
        this.getData();
      }
    }
  }
</script>
<style scoped>
  @import "../../assets/css/report.css";

</style>
